<template>
	<view class="bond-container">
		<view class="tab-bar">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item"
				:class="{ active: currentTab === index }"
				@click="handleTabClick(index)"
			>
				{{ tab.name }}
			</view>
		</view>
		<view class="content">
			<view v-if="bondList.length === 0" class="empty-state">
				<image src="/static/images/no-data.png" mode="aspectFit" class="empty-image" />
				<text class="empty-text">暂无记录</text>
			</view>
			<view v-else class="bond-list">
				<!-- 这里添加保证金列表内容 -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 0,
			tabs: [
				{ name: '全部状态', status: 'all' },
				{ name: '锁定中', status: 'locked' },
				{ name: '已退还', status: 'returned' },
				{ name: '已扣除', status: 'deducted' }
			],
			bondList: []
		}
	},
	methods: {
		handleTabClick(index) {
			this.currentTab = index;
			this.loadBondList(this.tabs[index].status);
		},
		async loadBondList(status) {
			// TODO: 根据状态加载对应的保证金列表数据
			try {
				// 这里添加实际的API调用
				this.bondList = [];
			} catch (error) {
				console.error('加载保证金列表失败:', error);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			}
		}
	},
	onLoad() {
		this.loadBondList('all');
	}
}
</script>

<style lang="scss">
.bond-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.tab-bar {
		display: flex;
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #eee;
		
		.tab-item {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			position: relative;
			
			&.active {
				color: #007AFF;
				font-weight: bold;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #007AFF;
					border-radius: 2rpx;
				}
			}
		}
	}
	
	.content {
		padding: 20rpx;
		
		.empty-state {
			padding: 100rpx 0;
			text-align: center;
			
			.empty-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
			
			.empty-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
}
</style>